<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        客户服务
                    </span>
                    <!--返回列表-->
                    <router-link style="margin-left: 530px;" :to="{path:'/khfw'}">
                        <span>
                            <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close"></i>
                        </span>
                    </router-link>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <br/>
                    <br/>
                    <!--表单-->
                    <el-form style="margin-top:5px;margin-left: 40px;" size="mini" :model="addkhfw"  :rules="rules">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item style="width:250px;" prop="kfZhuti">
                                    <label slot="label" style="font-size: 13px">主题：</label><br/>
                                    <el-input v-model="addkhfw.kfZhuti"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item style="width:250px;" prop="clientId">
                                    <label slot="label" style="font-size: 13px">客户：</label><br/>
                                    <!--客户名称-->
                                    <el-popover
                                            style="width: 700px; height: 450px;"
                                            placement="right"
                                            trigger="click"
                                            v-model="kehu">
                                        <span style="font-size: 16px;">关联客户模块</span>
                                        <br/>
                                        <el-input @keyup.enter.native="initData" v-model="kehuinput" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="initData"></i>
                                        </el-input>
                                        <el-table
                                                highlight-current-row
                                                border
                                                ref="kehulist"
                                                :data="kehulist">
                                            <el-table-column type="selection" width="50" align="center" property="clientId"></el-table-column>
                                            <el-table-column width="150" property="clientName" label="客户名称"></el-table-column>
                                            <el-table-column width="100" property="clientRank" label="级别"></el-table-column>
                                            <el-table-column width="150" property="clientMobile" label="手机号码"></el-table-column>
                                            <el-table-column width="200" property="clientSite" label="地址"></el-table-column>
                                        </el-table>
                                        <el-pagination
                                                style="margin-left: 350px;"
                                                layout="prev, pager, next"
                                                :page-size="pageSize"
                                                :current-page.sync="currPage"
                                                :total="totalSize">
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzkehu">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                        <el-input v-model="addkhfw.clientId.clientName" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="3">
                                <el-form-item style="width:100%;">
                                    <label slot="label" style="font-size: 13px;">服务类型:</label>
                                </el-form-item>
                            </el-col>

                            <el-col :span="20">
                                <el-form-item style="width:100%;">
                                    <template>
                                        <el-radio-group v-model="addkhfw.kfLeixing">
                                            <el-radio :label='"答疑"'>答疑</el-radio>
                                            <el-radio :label='"故障排除"'>故障排除</el-radio>
                                            <el-radio :label='"培训"'>培训</el-radio>
                                            <el-radio :label='"升级"'>升级</el-radio>
                                        </el-radio-group>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="3">
                                <el-form-item style="width:100%;">
                                    <label slot="label" style="font-size: 13px;">服务方式:</label>
                                </el-form-item>
                            </el-col>

                            <el-col :span="20">
                                <el-form-item style="width:100%;">
                                        <el-radio-group v-model="addkhfw.kfFangshi">
                                            <el-radio :label='"电话"'>电话</el-radio>
                                            <el-radio :label='"传真"'>传真</el-radio>
                                            <el-radio :label='"邮寄"'>邮寄</el-radio>
                                            <el-radio :label='"上门"'>上门</el-radio>
                                        </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="11">
                                <el-form-item style="width:250px;" prop="kfKaishitime">
                                    <label slot="label" style="font-size: 13px">选择日期：</label><br/>
                                    <el-date-picker
                                            v-model="addkhfw.kfKaishitime"
                                            type="date"
                                            placeholder="选择日期"
                                            style="width: 250px">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item style="width:250px;" prop="kfHuafeitime">
                                    <label slot="label" style="font-size: 13px">花费时间：</label><br/>
                                    <el-select v-model="addkhfw.kfHuafeitime" placeholder="全部数据" style="width: 250px" >
                                        <el-option
                                                v-for="item in optionss"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="3">
                                <el-form-item style="width:100%;">
                                    <label slot="label" style="font-size: 13px;">状态：</label>
                                </el-form-item>
                            </el-col>
                            <el-col :span="21">
                                <el-form-item style="width:100%;">
                                    <template>
                                        <el-radio-group v-model="addkhfw.kfZhuangtai">
                                            <el-radio :label='"无需处理"'>无需处理</el-radio>
                                            <el-radio :label='"未处理"'>未处理</el-radio>
                                            <el-radio :label='"处理中"'>处理中</el-radio>
                                            <el-radio :label='"处理完成"'>处理完成</el-radio>
                                        </el-radio-group>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="19">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">执行人：</label><br/>
                                    <el-select v-model="addkhfw.kfZhixingren" placeholder="全部数据" style="width: 250px" >
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="11">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">服务内容：</label><br/>
                                    <textarea v-model="addkhfw.kfNeirong" style="width: 250px;"></textarea>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">客户反馈：</label><br/>
                                    <textarea v-model="addkhfw.kfFankui" style="width: 250px;"></textarea>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="11">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">备注：</label><br/>
                                    <textarea v-model="addkhfw.kfBeizhu"  style="width: 250px;"></textarea>
                                </el-form-item>
                            </el-col>


                        </el-row>
                    </el-form>


                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:655px;left:230px;" class="dialog-footer">
                    <!--返回列表-->
                    <router-link :to="{path:'/khfw'}">
                        <el-button @click="jilutankuan = false">取 消</el-button>
                    </router-link>
                    &nbsp;&nbsp;
                    <el-button type="primary" @click="xzkhts()">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "Lkhfwtk",
        data() {
            return {
                kehu:false,//客户弹出框
                kehuinput:'',//客户弹框搜索框
                kehulist:[],//客户表格信息
                optionss: [ {
                    value: '一个小时',
                    label: '一个小时'
                }, {
                    value: '两个小时',
                    label: '两个小时'
                },{
                    value: '半个工作日',
                    label: '半个工作日'
                },{
                    value: '一个工作日',
                    label: '一个工作日'
                },{
                    value: '二个工作日',
                    label: '二个工作日'
                },{
                    value: '二个工作日以上',
                    label: '二个工作日以上'
                }],
                addkhfw:{
                    //投诉客户
                    clientId:'',
                    id: 0,
                    kfZhuti: '',//主题
                    kfKaishitime: '',//客服服务开始时间
                    kfHuafeitime: '',//客服服务结束时间
                    kfLeixing: '',//服务类型
                    kfFangshi: '',//服务方式
                    kfZhixingren: '',//执行人
                    kfNeirong: '',//服务内容
                    kfFankui: '',//客户反馈
                    kfZhuangtai: '',//服务状态
                    kfBeizhu: '',//备注
                    kfZt:'',//状态
                },
                rules: {
                    kfZhuti: [
                        {required: true, message: '请输入客服主题', trigger: 'blur'}
                    ],
                    clientId: [
                        {type:"string",required: true, message: '请选择客户', trigger: 'blur'}
                    ],
                    kfKaishitime: [
                        {required: true, message: '请输入服务开始时间', trigger: 'blur'}
                    ],
                    kfHuafeitime: [
                        {required: true, message: '请输入服务结束时间', trigger: 'blur'}
                    ],
                },
                //表单
                pageSize:5,//客户分页页大小
                currPage:1,//客户当前页码，默认为1
                totalSize:0,//客户总记录数
                hkkehu:0,//回款页面绑定客户查询
                xg:0,//判断是新增还是修改
                options:[],
            };
        },
        methods:{
            //新增客户投诉
            xzkhts(){
                if(this.xg==0){
                    this.$confirm('是否确定新增?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.addkhfw.kfZt =1
                        this.$axios.post("http://localhost:8088/vue/addkhwf",this.addkhfw)
                            .then(()=>{
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '新增成功!',
                                });
                                this.$router.push({
                                    path:'/khfw'
                                });
                            }).catch(()=>{
                                this.$message({
                                    showClose: true,
                                    message: '新增失败',
                                    type: 'error'
                                });
                            }
                        )
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            type: 'info',
                            message: '已取消新增'
                        });
                    });
                }else{
                    // window.console.log(this.addtousu);
                    this.$confirm('是否确定修改?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.addkhfw.kfZt =1
                        this.$axios.post("http://localhost:8088/vue/addkhwf",this.addkhfw)
                            .then(()=>{
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '修改成功!',
                                });
                                this.$router.push({
                                    path:'/khfw'
                                });
                            }).catch(()=>{
                                this.$message({
                                    showClose: true,
                                    message: '修改失败',
                                    type: 'error'
                                });
                            }
                        )
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            type: 'info',
                            message: '已取消修改'
                        });
                    });
                }
            },

            //选择客户确定按钮
            xzkehu() {
                this.$refs.kehulist.selection.forEach((pro)=>{
                    this.addkhfw.clientId=pro;
                });
                this.kehu=false;
                this.kehuinput='';
                // window.console.log(this.addtousu);
            },

            //客户查询方法
            initData(){
                this.$axios.post("http://localhost:8088/client-list",this.qs.stringify(
                    {search:this.kehuinput, page:this.currPage, size:this.pageSize,}))
                    .then(v=>{
                        this.kehulist = v.data.rows;
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },


        },
        created: function () {
            //修改接收值
            if(this.$route.query.key!=null){
                this.addkhfw=this.$route.query.key;
                this.xg = 1;
                window.console.log(this.addtousu);
            }
            this.initData();
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        }
    }
</script>


<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    /deep/ .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }
</style>